<template>
	<view class="page" :style="themeColor">
		<view class="flex benben-position-layout flex flex-wrap align-center aboutUs_flex_0"
			:style="{height:(64+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub aboutUs_fd0_0'>
				<view class='flex flex-wrap align-center aboutUs_fd0_0_c2' @tap.stop="handleJumpDiy" data-type="back"
					data-url="1">
					<text class='fu-iconfont2  aboutUs_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"
						data-url="1">
						<uv-icon name="close" color="#000" size="25rpx"></uv-icon>
					</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center flex-sub'>
					<text class='aboutUs_fd0_0_c1_c0'>单词打印</text>
				</view>
				<view class='flex flex-wrap align-center aboutUs_fd0_0_c2'>
					<!-- <association></association> -->
				</view>
			</view>

		</view>
		<view :style="{height: (64+StatusBarRpx)+'rpx'}"></view>
		<view class="loading_css" v-if="isShow">
			<uv-loading-icon size="24" mode="circle" color="#4087FD" :show="true"></uv-loading-icon>
			<view>加载中</view>
		</view>
		<block v-else>
			<view class="tips_info">
				<view class="tips_text">1、打开蓝牙，并关联上打印机</view>
				<view>2、点击打印后请等待3秒左右，等待打印完成即可</view>
			</view>
			<view class="dayin_content">
				<view class="customized">
					智海马私人订制
				</view>
				<view class="information">
					<view class="data_1">{{title_info.host_day}}</view>
					<view class="information_name">
						<text class="name">{{title_info.nickname}}</text>
						<text class="jieduan">{{title_info.title}}</text>
						<text class="jieduan" v-if="prinType == 4">第{{title_info.section}}节</text>
					</view>
					<view class="date_2" v-if="prinType == 2 || prinType == 4">
						<view style="margin-right: 2rpx;" v-if="title_info.which_number">第{{title_info.which_number}}周</view>
						<view style="margin-right: 2rpx;transform: translateY(2rpx);" v-if="title_info.current_day">{{title_info.current_day}}</view>
						<view class="" v-if="title_info.week">周{{title_info.week}}</view>
					</view>
				</view>
				<view class="list" v-for="(item, index) in wordlist" :key="index">
					<view class="item" v-for="(v, k) in item" :key="k">
						<view class="item_left">
							<view class="item_left_text item_right_text">{{v.word}}</view>
							<view class="item_left_line"></view>
							<view class="item_left_text"></view>
						</view>
						<view class="item_center"></view>
						<view class="item_right">
							<text class="item_right_text">{{v.c_word}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="noData" v-if="wordlist.length == 0 && !isShow">
				<image :src='STATIC_URL+"no.png"'></image>
			</view>
		</block>

		<view class="sub_btn">
			<view class="sub_text" @tap.stop="getPrint">提交打印</view>
		</view>

		<view :style="{height: '110rpx'}"></view>


	</view>
</template>
<script>
	import association from "./components/association.vue"
	export default {
		components: {
			association
		},


		data() {
			return {
				isShow: true,
				id: "",
				prinType: 1, // 1海马体1  2海马体2  3海马体3  4海马体1打印周
				wordlist: [], // 单词列表
				title_info: {}, // 标题内容
				arr: [],
				obj: {},
				is_submit: false,
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},
		},
		watch: {},
		onLoad(options) {
			let {
				id,
				prinType
			} = options;
			if (id !== undefined) this.id = id;
			if (prinType !== undefined) this.prinType = prinType;
			if (this.prinType == 1 || this.prinType == 2 || this.prinType == 4) {
				this.getData();
			} else if (this.prinType == 3) {
				this.getThreeData();
			}
			
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			this.is_submit = false;
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			// 打印数据  post65800c59e3bee
			getData() {
				this.$api.post(global.apiUrls.post65800c59e3bee, {
					record_id: this.id,
					type: this.prinType == 4 ? 3 : this.prinType
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.wordlist = res.data.data.wordlist;
						this.title_info = res.data.data;
						if (this.wordlist.length > 0) {
							let arr = [];
							this.wordlist.forEach((v, k) => {
								v.forEach((v1, k1) =>{
									arr.push({
										ChName: v1.c_word,
										EnName: v1.word
									})
								})
							})
							this.arr = arr;
						}
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			// 海马体3打印数据  wordlist_ids  post6597c4db7be95
			getThreeData() {
				this.$api.post(global.apiUrls.post6597c4db7be95, {
					aid: this.id,
					wordlist_ids: global.wordlist_ids
				}).then(res => {
					this.isShow = false;
					// console.log(res);
					if (res.data.code == 1) {
						this.wordlist = res.data.data.wordlist;
						this.title_info = res.data.data;
						if (this.wordlist.length > 0) {
							let arr = [];
							this.wordlist.forEach((v, k) => {
								v.forEach((v1, k1) =>{
									arr.push({
										ChName: v1.c_word,
										EnName: v1.word
									})
								})
							})
							this.arr = arr;
						}
						
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			
			// 打印
			getPrint() {
				if (this.arr.length == 0) {
					this.$message.info('没有需要打印的单词');
					return;
				}
				let _this = this;
				if (_this.is_submit) return;
				if (_this.$store.state.printerStatus == 1) {
					_this.is_submit = true;
					let data = {};
					if (_this.prinType == 1) {
						data = {
							"title": "智海马私人订制抗遗忘",
							"date": _this.title_info.host_day,
							"name": _this.title_info.nickname + '/' + _this.title_info.title,
							"data": JSON.stringify(_this.arr)
						}
					} else if (_this.prinType == 2) {
						data = {
							"title": "智海马私人订制抗遗忘",
							"date": _this.title_info.host_day,
							"name": _this.title_info.nickname + '/' + _this.title_info.title,
							"dateCycle": '第' + _this.title_info.which_number + '周' + '/' + _this.title_info.current_day + '/' + '周' + _this.title_info.week,
							"data": JSON.stringify(_this.arr)
						}
					} else if (_this.prinType == 3) {
						data = {
							"title": "智海马私人订制抗遗忘",
							"date": _this.title_info.host_day,
							"name": _this.title_info.nickname + '/' + _this.title_info.title,
							"data": JSON.stringify(_this.arr)
						}
					} else if (_this.prinType == 4) {
						data = {
							"title": "智海马私人订制抗遗忘",
							"date": _this.title_info.host_day,
							"name": _this.title_info.nickname + '/' + _this.title_info.title + '/' + '第' + _this.title_info.section + '节',
							"dateCycle": '第' + _this.title_info.which_number + '周' + '/' + _this.title_info.current_day + '/' + '周' + _this.title_info.week,
							"data": JSON.stringify(_this.arr)
						}
						_this.updatePrintStatus();
					}

					_this.$printer.printContentOne(res => {
						console.log(res);
						if (res.code == 1) {
							// if (_this.prinType == 4) {
							// 	_this.updatePrintStatus();
							// }
						} else {
							_this.$message.info('打印失败，请尝试重连打印机后再次打印');
							_this.is_submit = false;
						}
					}, data)
				} else {
					_this.$message.info('打印机初始化失败,请联系客服');
				}
			},
			// 更新打印周的打印状态  post65e0276d6bb52
			updatePrintStatus() {
				this.$api.post(global.apiUrls.post65e0276d6bb52, {
					record_id: this.title_info.record_id
				}).then(res => {
					console.log(res);
				})
			},
			
		}
	};
</script>
<style lang="scss" scoped>
	.sub_btn {
		width: 100%;
		position: fixed;
		bottom: 32rpx;
		padding: 0 25rpx;

		.sub_text {
			height: 68rpx;
			line-height: 68rpx;
			text-align: center;
			background: #4087FD;
			border-radius: 34rpx;
			font-size: 25rpx;
			color: #fff;
			font-weight: 500;
		}
	}

	.dayin_content {
		background: #fff;
		margin: 15rpx 25rpx;
		border-radius: 10rpx;
		padding-bottom: 24rpx;
		padding-top: 10rpx;
	}

	.customized {
		margin: 20rpx 123rpx 25rpx;
		font-size: 20rpx;
		text-align: center;
		background: #f8f8f8;
		padding: 8rpx 0;
	}

	.information {
		width: 188rpx;
		padding: 15rpx 0;
		margin-left: 160rpx;

		.data_1 {
			color: #333;
			font-size: 15rpx;
		}

		.information_name {
			// display: flex;
			// align-items: center;
			font-size: 15rpx;
			color: #333;
			margin-top: 10rpx;

			.name {
				margin-right: 4rpx;
			}

			.jieduan {}
		}

		.date_2 {
			display: flex;
			align-items: center;
			font-size: 15rpx;
			margin-top: 10rpx;
		}

		.information_day {
			font-size: 15rpx;
			color: #666;
			margin-top: 25rpx;
			display: flex;
			flex-flow: row wrap;

			.read_text {
				width: 50rpx;
				border-bottom: 2px solid #DDDDDD;
			}
		}
	}

	.list {
		margin: 0rpx 160rpx 10rpx;
		border-bottom: 1px solid #DDDDDD;

		.item {
			display: flex;
			border-top: 1px solid #DDDDDD;

			.item_left {
				width: 188rpx;
				height: 100rpx;
				font-size: 20rpx;

				.item_left_text {
					width: 100%;
					height: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 10rpx;
				}

				.item_left_line {
					width: 100%;
					height: 1px;
					background: #DDDDDD;
				}
			}

			.item_center {
				width: 1px;
				height: 100rpx;
				background: #DDDDDD;
			}

			.item_right {
				width: 188rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20rpx;
				padding: 0 10rpx;

				.item_right_text {
					-webkit-line-clamp: 1; // 用来限制在一个块元素显示的文本的行数
					display: -webkit-box; // 将对象作为弹性伸缩盒模型显示
					-webkit-box-orient: vertical; //设置或检查伸缩盒对象的子元素的排列方式
					text-overflow: ellipsis; // 在多行文本的情况下，用...隐藏超出范围的文本
					word-break: break-all;
					overflow: hidden;
				}
			}
		}
	}

	.tips_info {
		background: #eee;
		width: 100%;
		height: 79rpx;
		padding: 15rpx 25rpx;
		font-size: 15rpx;
		color: #666;

		.tips_text {
			margin-bottom: 8rpx;
		}
	}

	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #f8f8f8;
		background-size: 100% auto !important;
	}

	.aboutUs_flex_0 {
		background: #fff;
		width: 100%;
		height: 64rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.aboutUs_fd0_0_c2 {
		width: 100rpx;
		height: 50rpx;
	}

	.aboutUs_fd0_0_c1_c0 {
		font-size: 25rpx;
		font-weight: 500;
		color: #333;
		line-height: 64rpx;
	}

	.aboutUs_fd0_0_c0_c0 {
		font-size: 25rpx;
		font-weight: 500;
		color: #333;
	}

	.aboutUs_fd0_0 {
		margin: 0rpx 25rpx 0rpx 25rpx;
	}

	.aboutUs_fd1_1_c0 {
		font-weight: 400;
		color: #333333;
		font-size: 20rpx;
		margin-top: 25rpx;
	}

	.aboutUs_fd1_0 {
		width: 150rpx;
		height: 150rpx;
		border-radius: 16rpx;
		margin: 98rpx 0rpx 0rpx 0rpx;
	}

	.aboutUs_flex_2 {
		width: 100%;
		// height: 168rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
		padding-bottom: 35rpx;
	}

	.aboutUs_fd2_1 {
		margin: 8rpx 0rpx 0rpx 0rpx;
		color: #BFBFBF;
		font-size: 20rpx;
		font-weight: 400;
		line-height: 40rpx;
	}

	.aboutUs_fd2_0 {
		color: #BFBFBF;
		font-size: 20rpx;
		font-weight: 400;
		line-height: 40rpx;
	}
</style>